<template>
  <div>
    <topNav text="文章详情" @sendBack="sendBack"></topNav>

    <div class="normalWrapper" v-if="postDatail.type == 1">
      <div class="title">{{postDatail.title}}</div>
      <div class="info">{{postDatail.user.nickname}} {{postDatail.create_date.split('T')[0]}}</div>
      <div class="mainContent" v-html="postDatail.content"></div>
    </div>

    <div class="videoWrapper" v-if="postDatail.type==2">视频</div>
  </div>
</template>

<script>
import topNav from "@/components/topNav.vue";
export default {
  components: { topNav },
  data() {
    return {
      postDatail: {}
    };
  },
  methods: {
    sendBack() {
      this.$router.replace({ path: "/" });
    }
  },
  created() {
    this.$axios({
      url: "/post/" + this.$route.params.id
    }).then(res => {
      console.log(res.data);
      this.postDatail = res.data.data;
    });
  }
};
</script>

<style lang="less" scoped>
.normalWrapper {
  padding: 0 16px;

  .header {
    display: flex;
    align-items: center;
    .logoWrapper {
      flex: 1;
      padding-left: 2.78vw;
      .iconnew {
        font-size: 15vw;
      }
    }
    .btnFollow {
      border: 1px solid #bbb;
      padding: 1.11vw 2.78vw;
      font-size: 3.33vw;
      border-radius: 2.78vw;
    }
  }
  .title {
    font-size: 4.44vw;
    font-weight: bold;
  }
  .info {
    font-size: 3.89vw;
    color: #aaa;
    padding: 1.67vw 0 4.44vw;
  }
  /deep/ img {
    // 这里用 width 并不严谨
    max-width: 100%;
  }
}
</style>